/**
 * @Author: lusx
 * @Date:   21-03-2019 01:33:57
 * @Project: Govern督办
 * @Last modified by:   lusx
 * @Last modified time: 26-04-2019 05:06:13
 */

 import React, { Component } from 'react';
 import classnames from 'classnames';
 import { Icon } from 'weaver-mobile';

 function noop() { }
 let last = 0;

 const throttle = function (delay, action) {
   return function (params) {
     const curr = +new Date();
     if (curr - last > delay) {
       action(params);
       last = curr;
     }
   };
 };

 export default class ComFloatTouch extends Component {
   static defaultProps = {
     prefixCls: 'wm-floating-touch-com',
     onClick: noop,
   }

   constructor(props) {
     super(props);
     this.state = {
       left: document.documentElement.clientWidth - 52,
       top: (document.documentElement.clientHeight * 0.6) - 52,
       statusClassName: '',
     };
     this.onTouchMove = this.onTouchMove.bind(this);
   }
   componentDidMount() {
   }
   onTouchMove(event) {
     // event.preventDefault();// 阻止其他事件
     // 如果这个元素的位置内只有一个手指的话
     event.persist();
     if (event.targetTouches.length === 1) {
       const hd = window.getThemeVars().hd;
       const touch = event.targetTouches[0];// 把元素放在手指所在的位置
       let left = touch.pageX - (18 * hd);
       let top = touch.pageY - (18 * hd);
       if (left < 0) {
         left = 0;
       }
       if (top < 0) {
         top = 0;
       }
       if (left + (37 * hd) > document.documentElement.clientWidth) {
         left = document.documentElement.clientWidth - (37 * hd);
       }
       if (top + (37 * hd) > document.documentElement.clientHeight) {
         top = document.documentElement.clientHeight - (37 * hd);
       }
       this.setState({ left, top });
     }
   }

   onTouchStart() {
     this.setState({ statusClassName: 'status-active' });
   }

   onTouchEnd() {
     const hd = window.getThemeVars().hd;
     let { left } = this.state;
     if (left + (18 * hd) <= document.documentElement.clientWidth / 2) {
       left = 15;
     } else {
       left = document.documentElement.clientWidth - (15 * hd) - (37 * hd);
     }

     this.setState({ statusClassName: '', left });
   }

   onClick(e) {
     if (e.stopPropagation) {
       e.stopPropagation();
     }
     this.setState({ statusClassName: 'status-active' });
     this.props.onClick();
   }

   onNameCick(e) {
     if (e.stopPropagation) {
       e.stopPropagation();
     }
   }

   render() {
     const { className, style, prefixCls ,icon,color} = this.props;
     const { statusClassName } = this.state;
     const wrapCls = classnames(`${prefixCls}`, className);
     const wrapStyle = { left: this.state.left, top: this.state.top, ...style };
     return (
       <div style={{ height: '100%' }} className="g-comFloatTouch">
         <div className={wrapCls}
           style={wrapStyle}
           onTouchStart={() => this.onTouchStart()}
           onTouchEnd={() => this.onTouchEnd()}
           onTouchMove={(e) => { throttle(30, this.onTouchMove)(e); }}
           onClick={(e) => this.onClick(e)}
         >
           <div className={`status-wrap ${statusClassName}`}>
             <Icon type={icon} color={color}/>
           </div>
         </div>
         {this.props.children}
       </div>
     );
   }
 }
